<template>
  <el-tabs type="border-card" class="el-tabs--shadowless" style="min-height: 86vh">
    <el-tab-pane label="经营月报">
      <el-form @submit.native.prevent :inline="true">
        <el-form-item>
          <el-date-picker
            v-model="queryDate"
            type="month"
            placeholder="选择月"
            :picker-options="pickerOptions"
            @change="handleDateQuery()"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="getData()">查询</el-button>
          <el-button icon="el-icon-plus" v-if="buttonEdit" @click="handleEdit()">新增</el-button>
          <el-button :loading="downloadLoading" icon="el-icon-download" @click="onExportExcel()">
            下载
          </el-button>
        </el-form-item>
      </el-form>
      <manage-month ref="manage" @ispost="setButton"></manage-month>
      <manage-month-edit :visible.sync="manageVisible" @success="onsuccess()"></manage-month-edit>
    </el-tab-pane>
    <el-tab-pane label="经营季报">
      <manage-quarter></manage-quarter>
    </el-tab-pane>
    <el-tab-pane label="再担保报送">
      <manage-panel-country></manage-panel-country>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import ManagePanelCountry from '@/credit/views/city/report/ManagePanelCountry'
import ManageMonth from '@/credit/views/city/report/ManageMonth'
import ManageQuarter from '@/credit/views/city/report/ManageQuarter'
import ManageMonthEdit from '@/credit/views/city/report/ManageMonthEdit'
import { getMonthLastDayDate } from '@/common/plugins/tools/date'
import { mapGetters } from 'vuex'
export const setDay = 10
export function buttonEdit() {
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth()
  const lastDay = getMonthLastDayDate(year, month - 1)
  const day = month === 9 ? 12 : setDay
  let buttonEdit = false
  if (lastDay < date && new Date(year, month, day) > date) {
    buttonEdit = true
  }
  return buttonEdit
}
export default {
  components: {
    ManagePanelCountry,
    ManageMonth,
    ManageQuarter,
    ManageMonthEdit,
  },
  props: {},
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          const date = new Date()
          const month = date.getMonth()
          let maxTime = new Date(date.getFullYear(), month - 1)
          return time < new Date(2020, 8) || time > maxTime
        },
      },
      queryDate: '',
      manageVisible: false,
      downloadLoading: false,
      params: {},
      buttonShow: false,
    }
  },
  computed: {
    ...mapGetters(['user']),
    buttonEdit() {
      return buttonEdit() && this.buttonShow && +this.user.isReporter === 1
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleDateQuery() {
      this.params['year_number.eq'] = this.queryDate ? this.queryDate.getFullYear() : ''
      this.params['month_number.eq'] = this.queryDate ? this.queryDate.getMonth() + 1 : ''
      this.$refs.manage.getData(this.params)
    },
    onExportExcel() {
      this.$refs.manage.onExportExcel().finally(() => {
        this.downloadLoading = false
      })
    },
    onsuccess() {
      this.$refs.manage.getData()
    },
    handleEdit() {
      this.manageVisible = true
    },
    getData() {
      this.$refs.manage.getData(this.params)
    },
    setButton(value) {
      this.buttonShow = value
    },
  },
}
</script>

<style lang="scss" scoped></style>
